<template>
	<div>
		<div class="left">
			<div class="title">
				<span class="word">管理员信息</span>
			</div>
			<div class="line"></div>
			<div class="middle">
				<div class="mtop">
					<div>基础信息</div>
					<el-button @click="dialogFormVisible = true"
						>修改</el-button
					>
				</div>
				<div class="admin">
					<el-row :gutter="20">
						<el-col :span="6">
							<div class="grid-content bg-purple" />
							<span>姓名:{{ xinxi.user.admin_name }}</span>
						</el-col>
						<el-col :span="6">
							<div class="grid-content bg-purple" />
							<span>邮箱:{{ xinxi.user.admin_email }}</span>
						</el-col>
						<el-col :span="6">
							<div class="grid-content bg-purple" />
							<span>手机:{{ xinxi.user.admin_tel }}</span>
						</el-col>
						<el-col :span="6">
							<div class="grid-content bg-purple" />
							<span>密码:***********</span>
						</el-col>
					</el-row>
				</div>
				<div class="line2"></div>
				<div class="bottom">
					<div class="Btop">
						<div>管理的项目</div>
						
					</div>
					<div class="table">
						<el-table :data="xinxi.tableData">
							<el-table-column
								prop="project_name"
								label="项目名称"
								align="center"
							/>
							<el-table-column
								prop="city"
								label="城市"
								align="center"
							/>
							<el-table-column
								prop="function"
								label="功能"
								align="center"
							/>
							<el-table-column
								prop="create_time"
								label="线上时间"
								align="center"
							/>
						</el-table>
						<div class="page">
							<div class="example-pagination-block">
								<el-pagination
									layout="prev, pager, next"
									:total="100"
								/>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 修改弹出框 -->
	<div class="dialog userDialog">
		<el-dialog v-model="dialogFormVisible" width="23%" title="基础信息">
			<div class="line3"></div>
			<div v-if="!imgflag" @mouseover="mouseover" class="userimg">
				<img
					:src="
						'http://oao.zhichengshangxin.com/' +
						xinxi.form.headportrait
					"
					alt=""
					srcset=""
				/>
			</div>
			<div v-else class="userimg1" @mouseleave="mouseleave">
				<div class="mask">
					<el-upload
						class="avatar-uploader"
						action="http://oao.zhichengshangxin.com/UploadsFile"
						:show-file-list="false"
						ref="uploadRef"
						:on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload"
					>
						<img src="../../../../public/img/upload1.png" alt="" />
					</el-upload>
				</div>
				<img
					:src="
						'http://oao.zhichengshangxin.com/' +
						xinxi.form.headportrait
					"
					alt=""
					srcset=""
				/>
			</div>
			<el-form :model="xinxi.form" :rules="rules" ref="Cform">
				<el-form-item
					label="姓名"
					prop="admin_name"
					:label-width="formLabelWidth"
				>
					<el-input
						v-model="xinxi.form.admin_name"
						autocomplete="off"
					/>
				</el-form-item>
				<el-form-item
					label="邮箱"
					prop="admin_email"
					:label-width="formLabelWidth"
				>
					<el-input
						v-model="xinxi.form.admin_email"
						autocomplete="off"
					/>
				</el-form-item>
				<el-form-item
					label="手机号"
					prop="admin_tel"
					:label-width="formLabelWidth"
				>
					<el-input
						v-model="xinxi.form.admin_tel"
						autocomplete="off"
					/>
				</el-form-item>
				<div class="pwd" v-if="cpwd == true">
					<el-form-item
						prop="y_pwd"
						label="原密码"
						:label-width="formLabelWidth"
					>
						<el-input
							v-model="xinxi.form.y_pwd"
							type="password"
							autocomplete="off"
						/>
					</el-form-item>
					<el-form-item
						label="新密码"
						prop="n_pwd"
						:label-width="formLabelWidth"
					>
						<el-input
							v-model="xinxi.form.n_pwd"
							type="password"
							autocomplete="off"
						/>
					</el-form-item>
					<el-form-item
						label="确认密码"
						prop="confirmPwd"
						:label-width="formLabelWidth"
					>
						<el-input
							v-model="confirmPwd"
							type="password"
							autocomplete="off"
						/>
					</el-form-item>
				</div>
				<div v-if="cpwd == false">
					<el-form-item label="密码" :label-width="formLabelWidth">
						<span>*********</span>
						<div>
							<el-button
								type="text"
								style="align-items: end"
								class="chpwd"
								@click="changePwd"
								>更改密码</el-button
							>
						</div>
					</el-form-item>
				</div>
			</el-form>
			<div class="line"></div>

			<template #footer>
				<span class="dialog-footer">
					<el-button
						@click="(dialogFormVisible = false), (cpwd = false)"
						class="cancel"
						>取消</el-button
					>
					<el-button
						type="primary"
						@click="
							updateadminuser(Cform);
						"
						class="save"
						>保存</el-button
					>
				</span>
			</template>
		</el-dialog>
	</div>



</template>

<script setup>
import { regionData } from "element-china-area-data";
import {ElMessage} from 'element-plus'
import {useRouter} from 'vue-router'
import {
	UserInfo,
	UserInfoUpdate,

	getProjectInfo,

} from "@/api/model/login";
import { onMounted, reactive, ref } from "vue";
const Cform = ref(null);
const uploadRef = ref(false);
const formLabelWidth = ref(100);

const confirmPwd = ref("");
// const value1 = ref('')
const cpwd = ref(false);
const imgflag = ref(false);


const router = useRouter()
const dialogFormVisible = ref(false);
// const value = ref('')

const xinxi = reactive({
	options: regionData,
	selectedOptions: [],
	user: {},
	form: {},
	tableData: [],
	addproject: {
		city: "",
	},
	editproject: {},
});


const validateEmail = (rule,value, callback) => {
	if (value === "") {
		callback(new Error("请输入邮箱"));
	} else {
		if (
			/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(
				xinxi.form.admin_email
			)
		) {
			callback();
		}
		callback(new Error("请输入正确的邮箱"));
	}
};
const validateTel = (rule,value, callback) => {
	if (value === "") {
		callback(new Error("请输入手机号"));
	} else {
		if (
			/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
				xinxi.form.admin_tel
			)
		) {
			callback();
		}
		callback(new Error("请输入正确的手机号"));
	}
};
const validatePwd = (rule,value, callback) => {
	if (value === "") {
		callback(new Error("请再次输入新密码"));
	} else {
		if (confirmPwd.value === xinxi.form.n_pwd) {
			callback();
		}
		callback(new Error("两次密码输入不一致"));
	}
};
const rules = reactive({
	admin_name: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
	admin_email: [
		{
			validator: validateEmail,
			trigger: "blur",
		},
	],
	admin_tel: [
		{
			validator: validateTel,
			trigger: "blur",
		},
	],
	y_pwd: [{ required: true, message: "原密码不能为空", trigger: "blur" }],
	n_pwd: [{ required: true, message: "新密码不能为空", trigger: "blur" }],
	confirmPwd: [
		{
			validator: validatePwd,
			trigger: "blur",
		},
	],
});
onMounted(() => {
	getxinxiData();
	getprojectData();
});


function changePwd() {
	cpwd.value = true;
}

const mouseover = () => {
	imgflag.value = !imgflag.value;
	console.log(1111111111111);
};
const mouseleave = () => {
	imgflag.value = !imgflag.value;
	console.log(222222222222222);
};
const updateadminuser = (formEl) => {

	formEl.validate(async (valid) => {
    if (valid) {
		let res = await UserInfoUpdate(xinxi.form);
		dialogFormVisible.value = false
	if (res.status == 200) {
		
		// 回到登录页
		if(cpwd.value){
			ElMessage({
		  message: '修改成功请重新登录',
		  type: 'success',
		})
		localStorage.clear()
		router.replace({ path: '/login' });
		return false
		}
		ElMessage({
		  message: '修改成功',
		  type: 'success',
		})
		
		
	}
    } else {
		dialogFormVisible.value = false
      return false
    }
  })
	
};
const handleAvatarSuccess = (res) => {
	console.log(res);
	xinxi.form.headportrait = res.data;
};
const getxinxiData = async () => {
	let res = await UserInfo();
	xinxi.user = res.data;
	xinxi.form = res.data;
};
const getprojectData = async () => {
	let res = await getProjectInfo();
	xinxi.tableData = res.data.data;
	console.log(xinxi.tableData);
};
</script>

<style scoped lang="less">
.pwd {
	height: 50%;
}
.smbtn {
	width: 80px;
	height: 30px;
}

.userDialog {
	:deep(.el-dialog__title) {
		color: rgb(81, 99, 167);
		font-size: 19px;
	}

	:deep(.el-dialog__close) {
		font-size: 27px !important;
		color: rgb(81, 99, 167);
	}

	:deep(.el-dialog__body) {
		padding: 20px 0 20px;
	}
}

.left {
	background-color: white;

	border-style: none;
	border-color: unset;
	box-shadow: rgb(77 98 165 / 10%) 0px 5px 20px 0px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 20px;
	font-weight: normal;
	font-style: normal;

	.title {
		padding: 20px;

		.word {
			font-family: SourceHanSansSC;
			font-weight: 550;
			font-size: 20px;
			color: rgb(77, 98, 165);
			font-style: normal;
			letter-spacing: 2px;
			line-height: 28px;
			text-decoration: none;
		}
	}

	.line {
		border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
	}

	.middle {
		padding: 20px;
		width: 100%;
		font-family: SourceHanSansSC;
		font-weight: 400;
		font-size: 16px;
		color: rgb(127, 127, 127);
		font-style: normal;
		letter-spacing: 0px;
		line-height: 22px;
		text-decoration: none;

		.mtop {
			display: flex;
			justify-content: space-between;

			.el-button {
				width: 104px;
				height: 30px;
				z-index: 698;
				background-color: rgb(147, 170, 222);
				color: white;
			}
		}

		.line2 {
			width: 100%;
			padding-left: 40px;
			padding-right: 40px;
			border-bottom: dashed rgb(220, 224, 238) 1px;
			height: 1px;
			margin: auto;
			margin: 30px 0px 30px 0px;
		}
	}

	.bottom {
		.Btop {
			display: flex;
			justify-content: space-between;
			padding: 10px 0px 10px 0px;

			.el-button {
				width: 104px;
				height: 30px;
				z-index: 698;
				background-color: rgb(147, 170, 222);
				color: white;
			}
		}

		.table {
			.el-button {
				width: 80px;
				height: 30px;
				background-color: rgb(143, 170, 220);
				border-style: none;
				border-color: unset;
				border-radius: 4px;
				font-size: 14px;
				padding: 0px;
				text-align: center;
				line-height: 20px;
				font-weight: normal;
				font-style: normal;
			}
		}

		.page {
			display: flex;
			justify-content: flex-end;
		}
	}
}

.dialog {
	.el-form {
		width: 246px;
		border-style: none;
		border-color: unset;
		border-radius: 8px;
		font-size: 14px;
		text-align: center;
		line-height: 20px;
		font-weight: normal;
		font-style: normal;
		padding-top: 20px;
		margin-left: 20px;
	}

	/deep/.el-input__inner {
		-webkit-appearance: none;
		background-color: var(--el-input-bg-color, var(--el-color-white));
		background-image: none;
		border-radius: var(
			--el-input-border-radius,
			var(--el-border-radius-base)
		);
		border: var(--el-input-border, var(--el-border-base));
		box-sizing: border-box;
		color: var(--el-input-text-color, var(--el-text-color-regular));
		display: inline-block;
		font-size: inherit;
		height: 30px;
		line-height: 32px;
		outline: 0;
		padding: 0 11px;
		transition: var(--el-transition-border);
		width: 200px;
	}

	.userimg {
		.mask {
			// margin-top: 20px;
			position: absolute;
			top: 20px;
			background-color: rgba(0, 0, 0, 0.3);
		}

		img {
			width: 55px;
			height: 55px;
			border-radius: 100%;
		}

		// padding-top: 30px;
		margin: auto;
		width: 55px;
		height: 55px;
		border-radius: 100%;

		background-color: thistle;
		position: relative;
		// top: 20px;

		/* 而是显示元素 */
	}

	.userimg1 {
		background-color: rgba(27, 109, 204, 0.7);

		.qwe {
			margin-left: 15px;
		}

		.mask {
			font-size: 12px;
			width: 55px;
			height: 55px;
			border-radius: 100%;
			// background-color: rgba(27, 109, 204, 0.7);
			// margin-top: 20px;
			position: absolute;
			top: 20px;
			margin-bottom: 10px;

			img {
				width: 45px;
				height: 45px;
				position: absolute;
				top: -18px;
				left: 6px;
			}
		}

		img {
			width: 55px;
			height: 55px;
			border-radius: 100%;
		}

		// padding-top: 30px;
		margin: 0 auto;
		width: 55px;
		height: 55px;
		border-radius: 100%;

		background-color: thistle;
		position: relative;
		// top: 20px;

		/* 而是显示元素 */
	}

	/deep/ .el-form-item__label {
		font-family: SourceHanSansSC;
		font-weight: 400;
		font-size: 14px;
		color: rgb(127, 127, 127);
		font-style: normal;
		letter-spacing: 0px;
		line-height: 20px;
		text-decoration: none;
		padding-right: 30px;
	}
}

.dialogs {
	/deep/.el-dialog {
		--el-dialog-width: 410px;
		--el-dialog-margin-top: 15vh;
		--el-dialog-bg-color: var(--el-color-white);
		--el-dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		--el-dialog-title-font-size: var(--el-font-size-large);
		--el-dialog-content-font-size: 14px;
		--el-dialog-font-line-height: var(--el-font-line-height-primary);
		--el-dialog-padding-primary: 20px;
		position: relative;
		margin: var(--el-dialog-margin-top, 15vh) auto 50px;
		background: var(--el-dialog-bg-color);
		border-radius: 8px;
		box-shadow: var(--el-dialog-box-shadow);
		box-sizing: border-box;
		width: var(--el-dialog-width, 410px);
	}

	/deep/.line4 {
		border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
	}

	/deep/.el-input {
		width: 200px;
	}

	.el-form {
		width: 246px;
		border-style: none;
		border-color: unset;
		border-radius: 8px;
		font-size: 14px;
		text-align: center;
		line-height: 20px;
		font-weight: normal;
		font-style: normal;
		padding-top: 20px;
		margin-left: 40px;
	}

	/deep/.el-input__inner {
		left: 870px;
		top: 428px;
		height: 30px;
		border-radius: 4px;
		color: rgba(204, 204, 204, 100);
		font-size: 14px;
		text-align: left;
		font-family: Microsoft Yahei;
		border: 1px solid rgba(204, 204, 204, 100);
		line-height: 32px;
		outline: 0;
		padding: 0 11px;
		transition: var(--el-transition-border);
		width: 250px;
	}

	.userimg {
		padding-top: 30px;
		margin: auto;
		width: 55px;
		height: 55px;
		border-radius: 100%;
		background-color: thistle;
	}

	/deep/ .el-form-item__label {
		left: 790px;
		top: 433px;
		width: 57px;
		height: 20px;
		color: rgba(127, 127, 127, 100);
		font-size: 14px;
		text-align: left;
		font-family: SourceHanSansSC-regular;
	}
}

.chpwd {
	margin-left: 50px;
	left: 1037px;
	top: 633px;
	width: 56px;
	height: 20px;
	color: rgba(77, 98, 165, 100);
	font-size: 14px;
	text-align: left;
	font-family: SourceHanSansSC-regular;
	/deep/ span {
		color: #4d62a5 !important;
		display: inline-flex;
		align-items: center;
	}
}

.line3 {
	border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
	margin-bottom: 30px;
}

.cancel {
	left: 917px;
	top: 696px;
	width: 80px;
	height: 30px;
	line-height: 20px;
	border-radius: 4px;
	background-color: rgba(204, 204, 204, 100);
	text-align: center;
	border: none;
}

.save {
	left: 1013px;
	top: 696px;
	width: 80px;
	height: 30px;
	line-height: 20px;
	border-radius: 4px;
	background-color: rgba(143, 170, 220, 100);
	text-align: center;
	border: none;
}
</style>
<style scoped lang="less">
/deep/.el-dialog {
	--el-dialog-width: 346px;
	--el-dialog-margin-top: 15vh;
	--el-dialog-bg-color: var(--el-color-white);
	--el-dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	--el-dialog-title-font-size: var(--el-font-size-large);
	--el-dialog-content-font-size: 14px;
	--el-dialog-font-line-height: var(--el-font-line-height-primary);
	--el-dialog-padding-primary: 20px;
	position: relative;
	margin: var(--el-dialog-margin-top, 15vh) auto 50px;
	background: var(--el-dialog-bg-color);
	border-radius: var(--el-border-radius-small);
	box-shadow: var(--el-dialog-box-shadow);
	box-sizing: border-box;
	width: var(--el-dialog-width, 346px);
}

/deep/.el-table tr {
	background-color: rgb(246, 250, 255);
}

.el-row {
	margin-bottom: 20px;
}

.el-row:last-child {
	margin-bottom: 0;
}

.el-col {
	border-radius: 4px;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
}

/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
	border-bottom: white 4px solid !important;
}

.example-pagination-block + .example-pagination-block {
	margin-top: 10px;
}

.example-pagination-block .example-demonstration {
	margin-bottom: 16px;
}

/deep/.el-button > span {
	color: white;
	display: inline-flex;
	align-items: center;
}
</style>
